<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>自定义报表</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { font-weight: bold; font-size: 18px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: var(--primary-color); color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
        .tab { padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; }
        .tab.active { border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-weight: bold; }
        .filter-row { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-item { min-width: 200px; }
        .filter-item label { display: block; margin-bottom: 5px; font-size: 14px; }
        .filter-item select, .filter-item input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; margin-bottom: 20px; }
        .report-card { cursor: pointer; transition: transform 0.2s; }
        .report-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .report-title { font-weight: bold; margin-bottom: 5px; }
        .report-meta { font-size: 13px; color: #666; margin-bottom: 10px; }
        .report-preview { height: 160px; margin-bottom: 10px; background-color: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>自定义报表</h1>
                <div>
                    <button class="btn btn-primary" onclick="createNewReport()">创建新报表</button>
                </div>
            </div>
            
            <div class="tabs">
                <div class="tab active" onclick="switchTab('my-reports')">我的报表</div>
                <div class="tab" onclick="switchTab('shared')">共享报表</div>
                <div class="tab" onclick="switchTab('templates')">报表模板</div>
            </div>
            
            <div class="filter-row">
                <div class="filter-item">
                    <label>分类</label>
                    <select id="categoryFilter" onchange="filterReports()">
                        <option value="all">所有分类</option>
                        <option value="sales">销售</option>
                        <option value="customer">客户</option>
                        <option value="service">服务</option>
                        <option value="marketing">市场营销</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>创建时间</label>
                    <select id="createdFilter" onchange="filterReports()">
                        <option value="all">所有时间</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                        <option value="quarter">本季度</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label>排序方式</label>
                    <select id="sortFilter" onchange="filterReports()">
                        <option value="recent">最近创建</option>
                        <option value="name">名称</option>
                        <option value="views">查看次数</option>
                    </select>
                </div>
            </div>
            
            <div id="my-reports-content" class="tab-content">
                <div class="report-grid">
                    <!-- 报表1 -->
                    <div class="card report-card" onclick="viewReport(1)">
                        <div class="report-title">销售业绩分析</div>
                        <div class="report-meta">创建于: 2023-06-15 | 销售 | 查看 24 次</div>
                        <div class="report-preview">
                            <img src="https://via.placeholder.com/350x160?text=销售业绩图表预览" alt="报表预览" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div style="text-align: right;">
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); editReport(1)">编辑</button>
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); exportReport(1, 'pdf')">导出</button>
                        </div>
                    </div>
                    
                    <!-- 报表2 -->
                    <div class="card report-card" onclick="viewReport(2)">
                        <div class="report-title">客户群体细分分析</div>
                        <div class="report-meta">创建于: 2023-06-28 | 客户 | 查看 18 次</div>
                        <div class="report-preview">
                            <img src="https://via.placeholder.com/350x160?text=客户群体图表预览" alt="报表预览" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div style="text-align: right;">
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); editReport(2)">编辑</button>
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); exportReport(2, 'pdf')">导出</button>
                        </div>
                    </div>
                    
                    <!-- 报表3 -->
                    <div class="card report-card" onclick="viewReport(3)">
                        <div class="report-title">服务质量与满意度</div>
                        <div class="report-meta">创建于: 2023-07-05 | 服务 | 查看 12 次</div>
                        <div class="report-preview">
                            <img src="https://via.placeholder.com/350x160?text=服务质量图表预览" alt="报表预览" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div style="text-align: right;">
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); editReport(3)">编辑</button>
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); exportReport(3, 'pdf')">导出</button>
                        </div>
                    </div>
                    
                    <!-- 报表4 -->
                    <div class="card report-card" onclick="viewReport(4)">
                        <div class="report-title">营销活动效果分析</div>
                        <div class="report-meta">创建于: 2023-07-10 | 市场营销 | 查看 9 次</div>
                        <div class="report-preview">
                            <img src="https://via.placeholder.com/350x160?text=营销活动图表预览" alt="报表预览" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div style="text-align: right;">
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); editReport(4)">编辑</button>
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); exportReport(4, 'pdf')">导出</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="shared-content" class="tab-content" style="display: none;">
                <!-- 共享报表内容 -->
                <div class="report-grid">
                    <!-- 共享报表示例 -->
                    <div class="card report-card" onclick="viewReport(5)">
                        <div class="report-title">季度销售总结</div>
                        <div class="report-meta">共享人: 张经理 | 2023-07-01 | 查看 45 次</div>
                        <div class="report-preview">
                            <img src="https://via.placeholder.com/350x160?text=季度销售图表预览" alt="报表预览" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div style="text-align: right;">
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); exportReport(5, 'pdf')">导出</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="templates-content" class="tab-content" style="display: none;">
                <!-- 报表模板内容 -->
                <div class="report-grid">
                    <!-- 模板示例 -->
                    <div class="card report-card" onclick="useTemplate(1)">
                        <div class="report-title">销售绩效分析模板</div>
                        <div class="report-meta">标准模板 | 使用 126 次</div>
                        <div class="report-preview">
                            <img src="https://via.placeholder.com/350x160?text=销售绩效模板预览" alt="模板预览" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div style="text-align: right;">
                            <button class="btn btn-secondary" onclick="event.stopPropagation(); useTemplate(1)">使用此模板</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            function createNewReport() {
                alert('打开报表创建向导');
            }
            
            function switchTab(tab) {
                // 隐藏所有标签内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.style.display = 'none';
                });
                
                // 取消所有标签的激活状态
                document.querySelectorAll('.tab').forEach(t => {
                    t.classList.remove('active');
                });
                
                // 显示选中的标签内容
                document.getElementById(tab + '-content').style.display = 'block';
                
                // 激活选中的标签
                document.querySelector(`.tab[onclick="switchTab('${tab}')"]`).classList.add('active');
            }
            
            function filterReports() {
                const category = document.getElementById('categoryFilter').value;
                const created = document.getElementById('createdFilter').value;
                const sort = document.getElementById('sortFilter').value;
                
                alert('筛选报表: 分类=' + category + ', 创建时间=' + created + ', 排序=' + sort);
                // 这里应该是实际的AJAX请求更新数据
            }
            
            function viewReport(reportId) {
                alert('查看报表: ' + reportId);
                // 这里应该是实际的报表查看逻辑
            }
            
            function editReport(reportId) {
                alert('编辑报表: ' + reportId);
                // 这里应该是实际的报表编辑逻辑
            }
            
            function exportReport(reportId, format) {
                alert('导出报表 ' + reportId + ' 为 ' + format.toUpperCase() + ' 格式');
                // 这里应该是实际的报表导出逻辑
            }
            
            function useTemplate(templateId) {
                alert('使用模板 ' + templateId + ' 创建新报表');
                // 这里应该是实际的模板使用逻辑
            }
        </script>
    </th:block>
</body>
</html> 